<template>
  <div class="border-box">
    <div class="main">
      <div class="item" v-for="(item, index) in msg" :key="index">
        <div class="title">
          <div class="title-triangle"></div>
          <div class="title-triangle"></div>
          <div class="title-triangle"></div>
          <div class="title-triangle"></div>
          {{ item.title }}
        </div>
        <div class="content">
          <p class="num">{{ item.num }}</p>
          <!-- <p class="rate">落实率：{{ item.rate }}</p> -->
        </div>
      </div>
    </div>
    <div class="border-left"></div>
    <div class="border-right"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: [
        {
          title: "毕业生总人数",
          num: "7615人",
          rate: "60%",
        },
        {
          title: "本科生人数",
          num: "4630人",
          rate: "60%",
        },
        {
          title: "研究生人数",
          num: "2985人",
          rate: "60%",
        },
        {
          title: "总体落实率",
          num: "44.32%",
          //   rate: "60%",
        },
        {
          title: "本科生落实率",
          num: "36.46%",
          //   rate: "60%",
        },
        {
          title: "研究生落实率",
          num: "56.82%",
          //   rate: "60%",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: stretch;
  width: 31vw;
  height: 95%;
  color: #00fdfd;
  font-size: 0.9rem;
  padding-left: 2.5%;

  .item {
    width: 31%;
    height: 35%;

    .title {
      height: 30%;
      border: 1px solid #00fdfd;
      box-shadow: inset 0 0 10px 2px rgba(0, 253, 253, 0.7); /* 白色光晕 */
      line-height: 100%;
      position: relative;
      margin: 1vh 0 1vh 0;
      //   filter: blur(2px); /* 轻微的模糊 */
    }
    // 左上角
    .title-triangle:nth-child(1) {
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      top: 0;
      left: 0;
      border-width: 1vh 1vh 0 0;
      border-color: #00fdfd transparent transparent transparent;
    }
    // 左下角
    .title-triangle:nth-child(2) {
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      bottom: 0;
      left: 0;
      border-width: 1vh 0 0 1vh;
      border-color: transparent transparent transparent #00fdfd;
    }
    // 右上角
    .title-triangle:nth-child(3) {
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      top: 0;
      right: 0;
      border-width: 0 1vh 1vh 0;
      border-color: transparent #00fdfd transparent transparent;
    }
    // 右下角
    .title-triangle:nth-child(4) {
      width: 0;
      height: 0;
      border-style: solid;
      position: absolute;
      bottom: 0;
      right: 0;
      border-width: 0 0 1vh 1vh;
      border-color: transparent transparent #00fdfd transparent;
    }
    .content {
      height: 60%;
      margin-top: 0vh;
      .num {
        font-size: 1.5rem;
        margin: 0;
        height: 30%;
        color: #fffc1a;
      }
      .rate {
        font-size: 1rem;
        color: #fffc1a;
      }
    }
  }
  .item:nth-child(-n + 3) {
    margin: 0 0 2vh 0;
  }
}
.border-left {
  width: 0.1rem;
  right: 0;
  top: 5px;
  background-image: linear-gradient(
    to top,
    #08466e 0%,
    #08466e 50%,
    transparent 50%
  );
  background-size: 1px 11px;
  background-repeat: repeat-y;
  position: absolute;
  height: 100%;
  left: 34%;
  top: 0;
}
.border-right {
  width: 0.1rem;
  right: 0;
  top: 5px;
  background-image: linear-gradient(
    to top,
    #08466e 0%,
    #08466e 50%,
    transparent 50%
  );
  background-size: 1px 11px;
  background-repeat: repeat-y;
  position: absolute;
  height: 100%;
  right: 32.5%;
  top: 0;
}
.border-box {
  width: 32vw;
  height: 24vh;
  position: relative;
  background-color: rgb(11, 31, 66);
  border: 2px solid #00a1ff;
  border-radius: 8px;
  padding-top: 0.3vw;
}
.border-box::before {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 2rem);
  content: "";
  border-top: 2px solid #016886;
  border-bottom: 2px solid #016886;
  z-index: 0;
}
.border-box::after {
  position: absolute;
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 2rem);
  content: "";
  border-right: 2px solid #016886;
  border-left: 2px solid #016886;
  z-index: 0;
}
</style>